<template>
  <div class="placard" v-if="list">
    <div class="card" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
      <image class="cover" :src="item.cover" mode="widthFix" />
      <div class="title">{{item.title}}</div>
    </div>
  </div>
</template>
<script>
import * as PlacardActions from '@/api/placard'
export default {
  data () {
    return {
      list: null
    }
  },
  onLoad () {
    wx.showNavigationBarLoading()
    this.$forceUpdate()
    this.fetchList()
  },
  methods: {
    toDetail (item) {
      wx.navigateTo({ url: './detail?id=' + item.id })
    },
    fetchList () {
      PlacardActions.list({platform: 'mp'})
        .then(data => {
          this.list = data
          wx.hideNavigationBarLoading()
        })
        .catch(err => console.log(err.msg))
    }
  }
}
</script>
<style lang="less" scoped>
.placard {
  padding: 20rpx;
  .card {
      .cover {
    width: 100%;
    border-radius: 16rpx;
  }
    .title {
      color: #333333;
      font-size: 30rpx;
      padding: 10rpx 10rpx 30rpx;
    }
  }

}
</style>